<template>
  <div class="nice-table">
    <el-table
      :data="data"
      :border="showBorder"
      header-cell-class-name="thead"
      cell-class-name="tbody"
      @selection-change="handleSelectionChange"
      :span-method="spanMethod"
      @row-click="rowClick"
      :highlight-current-row="highlightCurrentRow"
      ref="multipleTable"
    >
      <el-table-column
        type="selection"
        width="55"
        v-if="showSelection"
        fixed="left"
        align="center"
      ></el-table-column>
      <el-table-column
        v-if="showIndex"
        label="序号"
        type="index"
        width="50"
        fixed="left"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{
            scope.$index + (pagination.pageNum - 1) * pagination.pageSize + 1
          }}</span>
        </template>
      </el-table-column>
      <slot name="className"></slot>
      <el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :label="column.label"
        :prop="column.prop"
        :width="column.width"
        :fixed="column.fixed"
      >
        <template slot-scope="scope">
          <template v-if="column.extends">
            <template v-for="extend in column.extends">
              <template v-if="extend.clickFunction && extend.isView">
                <a
                  v-if="extend.goFunction"
                  @click="handleGo(extend.goFunction, scope.row)"
                  >{{
                    scope.row.isView
                      ? scope.row[extend.key || 'phone']
                      : $hidePhone(scope.row[extend.key || 'phone'])
                  }}</a
                >
                <span v-else>{{
                  scope.row.isView
                    ? scope.row[extend.key || 'phone']
                    : $hidePhone(scope.row[extend.key || 'phone'])
                }}</span>

                <img
                  :src="scope.row.isView ? viewOff : viewOn"
                  @click.stop="handleClickItem(extend.clickFunction, scope.row)"
                  style="cursor: pointer; width: 16px"
                  v-if="scope.row[extend.key || 'phone']"
                />
              </template>
              <template
                v-else-if="extend.clickFunction && extend.isAccountView"
              >
                <span
                  v-if="
                    scope.row[extend.key || 'account'] &&
                      scope.row[extend.key || 'account'].length == 11
                  "
                  >{{
                    scope.row.isAccountView
                      ? scope.row[extend.key || 'account']
                      : $hidePhone(scope.row[extend.key || 'account'])
                  }}</span
                >
                <span v-else>{{ scope.row[extend.key || 'account'] }}</span>
                <!-- <img :src= "scope.row.isAccountView ? viewOff : viewOn " @click.stop="handleClickItem(extend.clickFunction, scope.row)" style="cursor: pointer;" v-if="scope.row.account&&scope.row.account.length==11"/> -->
              </template>
              <template v-else-if="extend.clickFunction && extend.isImg">
                {{ scope.row[column.prop] }}
                <i
                  :class="extend.icon"
                  v-if="extend.icon"
                  @click="handleClickItem(extend.clickFunction, scope.row)"
                ></i>
                <img
                  v-if="extend.imgurl"
                  :src="extend.imgurl"
                  :style="
                    extend.style
                      ? extend.style
                      : { width: '12px', height: '12px' }
                  "
                  @click="handleClickItem(extend.clickFunction, scope.row)"
                />
              </template>
              <template v-else-if="extend.filterFunction">{{
                typeof extend.filterFunction === 'function'
                  ? extend.filterFunction(scope.row[column.prop])
                  : '列配置有误'
              }}</template>
              <template v-else-if="extend.clickFunction && extend.isWechat">
                <span>{{ scope.row[column.prop] }}</span>
                <img
                  src="../assets/img/wechat.png"
                  style="width: 16px"
                  v-if="scope.row.wechat_status"
                  @click="handleClickItem(extend.clickFunction, scope.row)"
                  class="wechat"
                />
                <img
                  src="../assets/img/wechat_unactive.png"
                  style="width: 16px"
                  v-else
                  @click="handleClickItem(extend.clickFunction, scope.row)"
                  class="wechat"
                />
              </template>
              <template v-else-if="extend.isBtn">
                <a @click="handleClickItem(extend.clickFunction, scope.row)">{{
                  extend.btn_name
                }}</a>
              </template>
              <template
                v-else-if="
                  extend.clickFunction &&
                    !extend.isView &&
                    !extend.isAccountView &&
                    !extend.isImg
                "
              >
                <a @click="handleClickItem(extend.clickFunction, scope.row)">{{
                  extend.label ? extend.label : scope.row[column.prop]
                }}</a>
              </template>
              <template v-else>{{ scope.row[column.prop] }}</template>
            </template>
          </template>
          <template v-else-if="column.isImg">
            <img
              :src="scope.row[column.prop]"
              width="40"
              height="40"
              v-if="scope.row[column.prop]"
            />
          </template>
          <template v-else-if="column.isArray">
            <span
              v-for="(item, index) in scope.row[column.prop]"
              :key="index"
              class="nice-block"
              >{{ item }}</span
            >
          </template>
          <template v-else>{{ scope.row[column.prop] }}</template>
        </template>
      </el-table-column>
      <slot name="opreation"></slot>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="pagination.pageNum"
      :page-size="pagination.pageSize"
      layout="total,sizes, prev, pager, next, jumper "
      :total="pagination.total || 0"
    ></el-pagination>
  </div>
</template>

<script>
import viewOn from '@/assets/img/view_on.png'
import viewOff from '@/assets/img/view_off.png'
export default {
  name: 'NiceTable',
  props: {
    data: Array,
    showIndex: Boolean,
    columns: Array,
    pagination: Object,
    showSelection: Boolean,
    showOperation: Boolean,
    // isCellClick: {
    //   type: Boolean,
    //   default: false
    // }, //单元格是否有点击事件
    showBorder: {
      type: Boolean,
      default: true
    },
    highlightCurrentRow: false
  },
  data () {
    return {
      viewOn,
      viewOff
    }
  },
  watch: {
    data (val) {
      if (this.highlightCurrentRow) {
        this.$nextTick(() => {
          this.$refs.multipleTable.setCurrentRow(
            this.$refs.multipleTable.data[0]
          )
        })
      }
    }
  },
  methods: {
    // cellclick(row, column, event, cell) {
    //   if (this.isCellClick) {
    //     let _e = {
    //       id:row.id,
    //       label:column.label
    //     }
    //     this.$emit("handlecellclick", _e);
    //     // console.log(row, column, event, cell);
    //   }
    // },
    handleSelectionChange (val) {
      this.$emit('handleSelectionChange', val)
    },
    handleGo (click, item) {
      click(item)
    },
    handleClickItem (click, item) {
      if (typeof click === 'function') {
        click(item)
      } else {
        this.$message.error('列配置有误')
      }
    },
    handleCurrentChange (val) {
      if (typeof this.pagination.handleCurrentChange === 'function') {
        this.pagination.handleCurrentChange(val)
      } else {
        this.$message.error('分页配置有误')
      }
    },
    handleSizeChange (val) {
      if (typeof this.pagination.handleSizeChange === 'function') {
        this.pagination.handleSizeChange(val)
      } else {
        this.$message.error('分页配置有误')
      }
    },
    spanMethod ({ row, column, rowIndex, columnIndex }) {
      this.$emit('objectSpanMethod', { row, column, rowIndex, columnIndex })
    },
    rowClick (row) {
      this.$emit('rowClick', row)
    }
  }
}
</script>
<style lang="scss">
.nice-block {
  display: block;
}
.wechat {
  width: 35px;
  height: 25px;
  cursor: pointer;
}
img {
  vertical-align: middle;
}
</style>
